import { computed, defineComponent, h } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { QList, QItem, QExpansionItem, QItemSection, QIcon } from 'quasar';
import routes from 'src/router/routes';
const menuRoutes = routes.find((r) => r.name === 'Manage');
export const Menu = defineComponent({
  name: 'ZMenu',
  props: {
    menu: {
      type: Array,
      default: () => [],
    },
  },
  setup() {
    // const mapMenu = (menu) => {
    //   return menu.map((item) => {
    //     if (item.children) {
    //       return h(
    //         QExpansionItem,
    //         {
    //           label: item.title,
    //           icon: item.icon,
    //         },
    //         {
    //           default: () =>
    //             h(
    //               QItem,
    //               {},
    //               {
    //                 default: () =>
    //                   h(
    //                     QItemSection,
    //                     {},
    //                     {
    //                       default: () => mapMenu(item.children),
    //                     },
    //                   ),
    //               },
    //             ),
    //         },
    //       );
    //     } else {
    //       const node = h(
    //         QItem,
    //         {
    //           to: {
    //             name: item.name,
    //           },
    //           clickable: true,
    //         },
    //         {
    //           default: () => [
    //             h(
    //               QItemSection,
    //               { avatar: true },
    //               {
    //                 default: () =>
    //                   h(QIcon, {
    //                     name: item.icon,
    //                   }),
    //               },
    //             ),
    //             h(
    //               QItemSection,
    //               {},
    //               {
    //                 default: () => item.title,
    //               },
    //             ),
    //           ],
    //         },
    //       );
    //       return item.isHidden === '0' ? withDirectives(node, [[Ripple]]) : null;
    //     }
    //   });
    // };
    const MenuItem = defineComponent({
      name: 'MenuItem',
      props: {
        item: {
          type: Object,
          default: () => {},
        },
      },
      setup(props) {
        const route = useRoute();
        const router = useRouter();
        const active = computed(() => {
          return route.name === props.item.name;
        });
        const Item = computed(() => {
          return h(
            QItem,
            {
              clickable: true,
              ...props.item.meta,
              active: active.value,
              onClick: () => {
                router.push({
                  name: props.item.name,
                });
              },
            },
            {
              default: () => [
                h(
                  QItemSection,
                  { avatar: true },
                  {
                    default: () => h(QIcon, { name: props.item.meta.icon }),
                  },
                ),
                h(
                  QItemSection,
                  {},
                  {
                    default: () => props.item.meta.label,
                  },
                ),
              ],
            },
          );
        });
        return {
          Item,
        };
      },
      render() {
        return this.Item;
      },
    });
    const MenuGroup = defineComponent({
      name: 'MenuGroup',
      props: {
        item: {
          type: Object,
          default: () => {},
        },
      },
      setup(props, { slots }) {
        const Group = computed(() =>
          h(
            QExpansionItem,
            {
              ...props.item.meta,
            },
            slots,
          ),
        );
        return {
          Group,
        };
      },
      render() {
        return this.Group;
      },
    });
    const menu = (route) => {
      if (route.meta.children && route.meta.children.length) {
        return h(
          MenuGroup,
          { item: route },
          {
            default: () => route.children.map((item) => menu(item)),
          },
        );
      } else {
        return h(MenuItem, { item: route });
      }
    };
    const menus = computed(() => menuRoutes.children.map((item) => menu(item)));
    return {
      menus,
    };
  },
  render() {
    return h(
      QList,
      {
        padding: true,
      },
      {
        default: () => this.menus,
      },
    );
  },
});
export default Menu;
